<template>
    <div class="execution">
        <basic-container>
            <h2 class="title">基础信息</h2>
            <template>
                <el-row class=" basic-information">
                    <el-col :span="4"><div class="grid-content">订单编号:{{this.$route.query.buyId}}</div></el-col>
                    <el-col :span="4"><div class="grid-content">客户名称:{{this.$route.query.buyerName}}</div></el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            配送批次:
                            <el-select v-model="buySeq" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="grid-content">
                            配送方式:
                            <el-select v-model="deliveryType" placeholder="请选择">
                                <el-option
                                        v-for="item in options1"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content">
                            配送日期:
                            <el-date-picker
                                    v-model="deliveryTime"
                                    type="date"
                                    format="yyyy-MM-dd"
                                    valueFormat='yyyy-MM-dd'
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content">
                            收货地址:
                            <el-input v-model="address"></el-input>
                        </div>
                    </el-col>
                </el-row>
            </template>
        </basic-container>
        <!--订购商品清单-->

        <basic-container>
            <h2>订购商品清单</h2>
            <el-row type="flex" justify="start">
                <el-col :span="4"><el-input v-model="goodsName" class="goodsName" placeholder="请输入商品姓名"></el-input></el-col>
                <el-col :span="4"><div class="pos"><el-button type="primary" @click="showAllGoods">添加商品</el-button></div></el-col>
            </el-row>
            <el-dialog title="商品列表" :visible.sync="dialogVisible">

                <el-table :data="goodsInfo" border @selection-change="handleSelectionChange">
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column property="goodsImg" label="商品图片" width="120" align="center">
                        <template slot-scope="scope">
                            <img :src="scope.row.modelUrl" width="45" height="45"/>
                        </template>
                    </el-table-column>
                    <el-table-column property="modelUnit" label="单位" align="center"></el-table-column>
                    <el-table-column property="goodsCategory" label="商品分类" align="center"></el-table-column>
                    <el-table-column property="modelName" label="规格" align="center"></el-table-column>
                    <el-table-column property="modelName" label="起订量" align="center"></el-table-column>
                    <el-table-column property="modelPrice" label="价格" align="center"></el-table-column>
                </el-table>
                <div style="width: 100%;text-align: center">
                    <el-pagination
                            small
                            :page-size="page.pageSize"
                            @prev-click="prev"
                            @next-click="next"
                            @current-change="currentChange"
                            :current-page="page.currentPage"
                            layout="prev,pager,next"
                            :total="page.total">
                    </el-pagination>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addGoods">确 定</el-button>
                </div>
            </el-dialog>
            <!--商品列表表格-->
            <el-table
                    :data="pocData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="goodsModelId"
                        label="商品编号"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        label="商品图片"
                        align="center"
                        width="180">
                    <template slot-scope="scope">
                        <img :src="scope.row.goodsImg" height="50px"/>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="unit"
                        align="center"
                        label="单位">
                </el-table-column>
                <el-table-column
                        prop="goodsCate"
                        align="center"
                        label="商品分类">
                </el-table-column>
                <el-table-column
                        prop="minimumNum"
                        align="center"
                        label="起订量">
                </el-table-column>
                <el-table-column
                        prop="buyPrice"
                        align="center"
                        label="价格">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="下单数量"
                        prop="goodsNum">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.goodsNum" placeholder="请输入采购金额"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        fixed="right"
                        align="center"
                        label="操作"
                        width="120">
                    <template slot-scope="scope">
                        <el-button
                                @click.native.prevent="deleteRow(scope.$index, pocData)"
                                type="text"
                                size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="settle-accounts">
                <h3>合计金额:￥{{this.$route.query.totalPrice}}</h3>
            </div>
            <!--提交按钮等-->
            <div>
                <el-row>
                    <el-button>重置</el-button>
                </el-row>
                <el-row>
                    <el-button type="primary" @click="cancelOrderAndDetail">取消订单</el-button>
                    <el-button type="primary" @click="submitOrder">提交订单</el-button>
                </el-row>
            </div>

        </basic-container>
    </div>
</template>

<script>
    import{
        remote
    } from "../../../../api/admin/dict";
    import {
        getOrderDetail,
        createBuyOrderDetailList
    } from "../../../../api/scm/order/order_manage";
    import {
        fetchList
    } from "../../../../api/goods/goodsmodel";
    import {
        putObj,
        updDetailList,
        cancelOrder
    } from "../../../../api/saleb/buyorder";
    export default {
        name: "index",
        data() {
            return {
                buySeq:'',
                deliveryTime: '',
                deliveryType:'',
                address:'',
                options: [],
                options1:[],
                form: {
                    status:'待分配',
                    purchaseOdd:'CG454657889',
                    audit:'',
                    goods:'',
                    num:'',
                    expensepre:'',
                    expenseName:'',
                    remark:''
                },
                pocData: [],
                dialogVisible: false,
                goodsInfo:[],
                page: {
                    total: 0, // 总页数
                    currentPage: 1, // 当前页数
                    pageSize: 6 // 每页显示多少条
                },
                goodsName:'',
                select:[]
            }
        },
        created() {
            this.init();
            this.buySeq=this.$route.query.buySeq
            this.deliveryTime=this.$route.query.deliveryTime
            this.deliveryType=this.$route.query.deliveryType
            this.address=this.$route.query.address
        },
        methods:{
            init(){
                remote('scm_delivery_seq').then(res => {
                    this.options=res.data.data
                })

                remote('scm_delivery_type').then(res => {
                    this.options1=res.data.data
                })

                let pmId=this.$route.query.pmId
                let buyId=this.$route.query.buyId
                getOrderDetail(pmId,buyId).then(res =>{
                    this.pocData=res.data.data
                })
            },
            deleteRow(index,pocData){
                this.pocData[index].delFlag='1'
                let data = this.pocData[index]
                let list = [data]
                updDetailList(list).then(res =>{
                    if(res.code=200){
                        this.$message.success('删除成功')
                        pocData.splice(index,1);
                    }else{
                        this.$message.error('删除失败')
                    }
                })
            },
            getList(page, params) {
                fetchList(Object.assign({
                    current: page.currentPage,
                    size: page.pageSize
                }, params)).then(response => {
                    this.goodsInfo = response.data.data.records
                    this.page.total = response.data.data.total
                    this.tableLoading = false
                })
            },submitOrder(){
                let buyOrder = {
                    id:this.$route.query.id,
                    buySeq:this.buySeq,
                    deliveryTime:this.deliveryTime,
                    deliveryType:this.deliveryType,
                    address:this.address
                }
                putObj(buyOrder).then(res =>{
                    if(res.code=200){
                    }else{
                        this.$message.error('提交失败')
                    }
                })
                updDetailList(this.pocData).then(result =>{
                    if(result.code=200){
                    }else{
                        this.$message.error('提交失败')
                    }
                })
            },
            cancelOrderAndDetail(){
                let req = {
                    id : this.$route.query.id,
                    pmId : this.$route.query.pmId,
                    buyId : this.$route.query.buyId
                }
                cancelOrder(req).then(res => {
                    if(res.code=200){
                        this.$message.success('取消成功')
                        this.$router.go(-1);
                    }else{
                        this.$message.error('取消失败')
                    }
                })
            },
            showAllGoods(){
                let params={
                }
                this.getList(this.page,params);
                this.dialogVisible = true;
            },
            prev(){
                let params={
                }
                this.page.currentPage=this.page.currentPage-1;
                this.getList(this.page,params);
            },
            next(){
                let params={
                }
                this.page.currentPage=this.page.currentPage+1;
                this.getList(this.page,params);
            },
            currentChange(page){
                let params={
                }
                this.page.currentPage=page;
                this.getList(this.page,params)
            },
            addGoods(){
                let params={
                    buyOrder:this.$route.query,
                    list:this.select
                }
                createBuyOrderDetailList(params).then(res => {
                    if(res.data.code == 0){
                        this.$message.success("添加成功")
                    }else{
                        this.$message.error("添加失败")
                    }
                })
                this.dialogVisible = false;
            },
            handleSelectionChange(val){
                this.select=val;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title{
        margin-left: 10px;
    }
    .el-row {
        margin-bottom: 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .grid-content {
        min-height: 36px;
    }
    .row-bg {
        padding: 10px 0;
    }
    .el-select,.el-date-editor{
        width: 75% !important;
    }
    .el-input{
        width: 81%;
    }
    .basic-information{
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .checkGoods{
        color: blue;
        line-height: 40px;
    }
    .settle-accounts{
        &:after{
            content: "";
            display: block;
            height: 0;
            clear: both;
            overflow: hidden;

        }
        h3{
            float: right;
            margin-top: 20px;
        }
    }
    .goodsName{
        width:200px;
        display: inline-block;
    }
    .pos{
        text-align: center;
    }
</style>
